<template>
   <div class="tab-bar-item" @click="itemClick">
       <!-- 这里需使用div -->
     <div v-if="!isActive">
         <slot name="item-icon"></slot>
    </div> 

     <div v-else >
          <slot name="item-icon-active"></slot>
     </div>  

     <div :style="activeStyle">
         <slot name="item-text"></slot>
     </div>

   </div>
</template>
<script>
export default {
    name:"TabBarItem",
    props:{
        path:String,
        activeColor:{
            type:String,
             default: 'red'

        }

    },
    data() {
        return {
            // isActive:true
        }
    },
    computed:{
        isActive(){
            // return this.$router.path.indexOf(this.path) !== -1
                return this.$route.path.indexOf(this.path) !== -1
            // return this.$router.path === this.path 
        },
        activeStyle() {
        return this.isActive ? {color: this.activeColor} : {}
      }
    },
    methods: {
        itemClick(){
            // if(this.$router.path === this.path)
            this.$router.replace(this.path).catch(err => {})
        }
    },

}
</script>
<style scoped>
 .tab-bar-item{
   flex: 1;
   text-align: center;
   height: 49px; 
   font-size: 14px;
   /* 一般常用49px */
 }
  .tab-bar-item img{
      width: 24px;
      height: 24px;
      margin-top: 3px;
      /* vertical-align: middle; */
  }
  /* .active{
      color: red;
  } */
</style>